<template>
  <div class="inputWrapper">
    <input
      :class="{
        error: !isOK,
      }"
      :type="type"
      :placeholder="tishi"
      v-model="value"
      @blur="errShow"
    />
    <!-- 对象里面的属性以 key: value 声明 -->
    <!-- className: 是否添加这个类名的判断 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      isOK: true,
    };
  },
  props: ["type", "tishi", "rule", "errMsg"],
  watch: {
    value(newValue) {
      // console.log(newValue);
      if (this.rule.test(newValue)) {
        console.log("合格");
        this.isOK = true;
      } else {
        // console.log("不合格");
        console.log(this.errMsg);
        this.isOK = false;
      }
      //发送要检测的内容给父组件
      this.$emit("setValue", newValue);
    },
  },
  methods: {
    errShow() {
      if (!this.isOK) {
        this.$toast({
          message: this.errMsg,
          position: "middle",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.inputWrapper {
  input {
    width: 100%;
    font-size: 18/360 * 100vw;
    height: 46/360 * 100vw;
    line-height: 46/360 * 100vw;
    border: none;
    outline: none;
    border-bottom: 1px solid #333;
  }
  .error {
    border-color: red;
  }
}
</style>